<template>
  <div class="login-wrap">
    <a-row type="flex" justify="center" align="center">
      <a-col :span="16">
        <div class="login-show">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-image
                  width="100%"
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              />
            </a-col>
            <a-col :span="12">
              <div class="login-form">
                <div class="login-row">
                  <a-divider><h3>登录</h3></a-divider>
                </div>
                <div class="login-row">
                  <a-form layout="horizontal" :model="formInline" @submit="handleSubmit" @submit.native.prevent
                          :wrapperCol="{ span: 24 }">
                    <a-form-item label="用户名">
                      <a-input v-model:value="formInline.username" placeholder="Username" size="large">
                        <template #prefix>
                          <UserOutlined style="color:rgba(0,0,0,.25)"/>
                        </template>
                      </a-input>
                    </a-form-item>
                    <a-form-item label="密码">
                      <a-input v-model:value="formInline.password" type="password" placeholder="Password" size="large">
                        <template #prefix>
                          <LockOutlined style="color:rgba(0,0,0,.25)"/>
                        </template>
                      </a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-button
                          type="primary"
                          html-type="submit"
                          block
                          size="large"
                          :disabled="formInline.username === '' || formInline.password === ''"
                      >
                        Log in
                      </a-button>
                    </a-form-item>
                  </a-form>
                </div>


              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {login} from '@/api/login'
import {useStore} from 'vuex'
import {reactive,getCurrentInstance} from 'vue'
import {useRouter,useRoute,useLink} from 'vue-router'
import {SAVE_TOKEN} from '@/store/storeType'
export default {
  name: "login",
  setup(props) {
    const store = useStore()
    const router = useRouter()
    const formInline = reactive({
      username: 'wym',
      password: '123456',
    })
    const handleSubmit = () => {
      login(formInline).then(res => {
        store.dispatch(SAVE_TOKEN,res)
        router.push("/role")
      })
    }

    return {
      formInline,
      handleSubmit
    }
  }
}
</script>

<style lang="less" scoped>
.login-wrap {
  width: 100%;
  height: 100%;
  padding: 160px 0 30px;
}

.login-show {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px #ccc;
  padding: 4%;
  min-height: 500px;
}

.login-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.login-row {
  width: 100%;

  .ant-divider {
    margin-bottom: 0;
  }
}
</style>